<template>
	<view>
		<view class="header-comp">
			<view class="header">
				<view class="header-bar">
					<view class="fill-height el-flex">
						<view class="header-btn2" @click="Back()">
							<image src="../../static/images/left_b.png" mode=""></image>
						</view>
						<view class="placeholder text-ellipsis">
							选择收货地址
						</view>
						<view class="app-header-right"></view>
					</view>
				</view>
			</view>
		</view>
		<view class="container">
			<view class="top-bar">
				<view class="el-flex box">
					<view class="city" @click="toCityDetail">
						<view class="text text-ellipsis">{{city}}</view>
						<text class="icon-fold"></text>
					</view>
					<view class="image-icons icon-search">
						<image src="../../static/images/search_b.png" mode=""></image>
					</view>
					<view class="ui-input">
						<input type="text" placeholder="请输入您的收货地址" v-model:value="keyword">
					</view>
				</view>
			</view>
			<view class=" border-bottom el-flex"></view>
			<view class="page-wrap">
				<template v-if="keyword==''">
					<view class="nodata" @click="isShowPop=true">手动选择地址</view>
				</template>
				<template v-else>
					<view class="search-list">
						<view class="li" v-for="(item,index) in position" :key="index" @click="getPosition(item)">
							<view class="item-name">
								{{item.name}}
							</view>
							<view class="item-addr">
								<block v-for="(text,textIndex) in item.addrs">
									<template v-if="text.region_type==1||text.region_type==2">
										<text style="margin-right: .15rem;">
											{{text.name}}
										</text>
									</template>
								</block>

							</view>
						</view>
					</view>
					<view class=" border-bottom el-flex"></view>
					<view class="manually-box" @click="isShowPop=true">
						<text> 没找到？点我</text><text class="act">手动选择</text>
					</view>
				</template>
			</view>
			<u-popup :show="isShowPop" mode="bottom" @close="isShowPop=false" closeable closeOnClickOverlay>
				<view class="pop-box">
					<view class="ui-pop-title">
						选择地址
					</view>
					<view class="ui-pop-conten">
						<view class="region-tab">
							<template v-if="selectList.length!==0">
								<block v-for="(item,index) in selectList" :key="index">
									<text class="item" @click="getSelectItem(item,index)">
										{{item.name}}
									</text>
								</block>
							</template>
							<text class="active">请选择</text>
						</view>
						<view class="region-list">
							<view class="list">
								<view class="item" v-for="(item,index) in proviceList" :key="index"
									@click="getProviceItem(item)">
									{{item.name||item.region_name}}
								</view>
							</view>
						</view>
					</view>
				</view>
			</u-popup>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				product_id: '',
				isShowPop: false,
				keyword: '',
				city: '',
				position: [],
				proviceList: [],
				selectList: [],
				provice: [],
				AllProviceList: [],
				regions: {
					province: {
						id: '',
						name: ""
					},
					city: {
						id: '',
						name: ""
					},
					district: {
						id: '',
						name: ""
					},
					area: {
						id: '',
						name: ''

					}
				},
			};
		},
		// onBackPress(e) {
		// 	if (e.from === 'backbutton') {
		// 		uni.navigateTo({
		// 			url: `/subPage/proddetail/proddetail?id=${this.product_id}`
		// 		})
		// 	}
		// },
		watch: {
			keyword(newVal) {
				this.fetchAddressData(newVal)
			},
		},
		methods: {
			Back() {
				uni.navigateBack(-1)
			},
			findP(id, list = [], result = []) {
				for (let i = 0; i < list.length; i += 1) {
					const item = list[i]
					// 找到目标
					if (item.id === id) {
						// 加入到结果中
						result.push(item.child)
						// 因为可能在第一层就找到了结果，直接返回当前结果
						if (result.length === 1) return result
						return true
					}
					// 如果存在下级节点，则继续遍历
					if (item.child) {
						// 预设本次是需要的节点并加入到最终结果result中
						result.push(item.child)
						const find = this.findP(id, item.child, result)
						// 如果不是false则表示找到了，直接return，结束递归
						if (find) {
							return result
						}
						// 到这里，意味着本次并不是需要的节点，则在result中移除
						result.pop()
					}
				}
				// 如果都走到这儿了，也就是本轮遍历children没找到，将此次标记为false
				return false
			},
			getPosition(item) {
				let that = this
				uni.navigateBack({
					delta: 1,
					success() {
						that.$store.commit('getPositionData', item)
						uni.$emit('setPosition',true)
					}
				})
			},
			getSelectItem(item, index) {
				if (index == 0) {
					this.selectList.splice(index)
					this.proviceList = this.provice
				} else {
					this.selectList.splice(index)
					let list = this.findP(item.id, this.provice)
					this.proviceList = list[index - 1]
				}
			},
			getProviceItem(item) {
				let len = this.selectList.length
				if (len == 0) {
					this.regions.province = {
						name: item.name,
						id: item.id
					}
				} else if (len == 1) {
					this.regions.city = {
						name: item.name,
						id: item.id
					}
				} else if (len == 2) {
					this.regions.district = {
						name: item.name,
						id: item.id
					}
				} else if (len == 3) {
					this.regions.area = {
						name: item.region_name,
						id: item.region_id
					}
					this.getPosition(this.regions)
				}
				if (item.name) {
					this.selectList.push({
						name: item.name,
						id: item.id
					})
				}
				if (item.child) {
					this.proviceList = item.child
				} else if (item.zipcode) {
					this.fetchRegion(item.id)
				}

			},
			toCityDetail() {
				uni.navigateTo({
					url: `/subPage/cityDetail/cityDetail?product_id=${this.product_id}`,
				})
			},
			fetchAddressData(keyword) {
				this.$request.get('/getAddressSearch', {
					keywords: keyword,
					city: this.city
				}).then((res) => {
					this.position = res.data.data.pois
				}).catch(e => {
					console.log('错误了:', e)

				})
			},
			fetchAllAddress() {
				this.$request.get('/getAllAddress')
					.then((res) => {
						this.proviceList = res.data.data
						this.provice = res.data.data
					}).catch(e => {
						console.log('错误了:', e)

					})
			},
			fetchRegion(parentId) {
				this.$request.get('/getRegion', {
						parentId: parentId,
					})
					.then((res) => {
						this.proviceList = res.data.data.regions

					}).catch(e => {
						console.log('错误了:', e)

					})
			},
		},
		onShow() {
			uni.$on('getCity', (obj) => {
				this.product_id = obj.product_id
				this.city = obj.city
			})
		},
		onUnload(){
			uni.$off('getCity')
		},
		onLoad(e) {
			this.fetchAllAddress()
			this.product_id = e.product_id
			if (!e.city || e.city == '') {
				this.city = '北京'
			} else {
				this.city = e.city
			}

		}
	}
</script>

<style lang="scss" scoped>
	.header {
		height: .96rem;
		background-color: rgb(242, 242, 242);


		.header-bar {
			height: 100%;
		}

		.fill-height {
			height: 100%;

			.header-btn2 {
				display: block;
				width: 0.6rem;
				margin: 0 0.2rem;

				image {
					width: 0.5rem;
					height: 0.5rem;
				}
			}

			.app-header-right {
				min-width: 1rem;
			}

			.placeholder {
				flex: 1;
				text-align: center;
				font-size: .3rem;
				min-width: 0;
				width: 100%;
				color: rgb(102, 102, 102);
			}
		}
	}

	.container {
		background: #fff;
		color: #3c3c3c;
		padding-top: .96rem;

		.top-bar {
			box-sizing: border-box;
			background: #fff;
			z-index: 99;
			width: 100%;
			height: 0.8rem;
			left: 0;

			.box {
				justify-content: flex-start;
			}

			.city {
				display: block;
				color: #333;
				width: 1.8rem;
				height: 0.8rem;
				line-height: .8rem;
				text-align: center;
				border-right: 1px solid #f4f4f4;

				.text {
					display: inline-block;
					max-width: 0.96rem;
					height: 0.8rem;
					font-size: .22rem;
					line-height: .8rem;
					vertical-align: middle;
					text-overflow: ellipsis;

				}

				.icon-fold {
					display: inline-block;
					font-size: .3rem;
					margin-left: 0.1rem;
					color: #ddd;
					-webkit-transform: rotate(180deg);
					transform: rotate(180deg);

					&:before {
						content: " ";
						position: absolute;
						width: 0.14rem;
						height: 0.14rem;
						right: 0.14rem;
						top: 50%;
						border-right: 1px solid #999;
						border-bottom: 1px solid #999;
						-webkit-transform: rotate(225deg);
						margin-top: 0.04rem;
					}
				}
			}

			.image-icons {
				width: 0.42rem;
				height: 0.42rem;
				margin-left: 0.3rem;
				vertical-align: -0.24rem;

				image {
					width: 0.42rem;
					height: 0.42rem;
				}
			}

			.ui-input {
				border: none;
				overflow: hidden;
				font-size: .24rem;

				input {
					text-indent: 1em;
				}
			}
		}

		.page-wrap {
			.nodata {
				background: #fff;
				text-align: center;
				height: 1rem;
				font-size: .24rem;
				line-height: 1rem;
			}

			.search-list {

				padding: 0 0.4rem;
				background: #fff;
				box-sizing: border-box;

				view {
					line-height: 1.15;
				}

				.li {
					display: block;
					padding: 0.3rem 0;
					border-bottom: 1px solid #f6f6f6;
					text-align: left;

					.item-name {
						font-size: .24rem;
					}

					.item-addr {
						font-size: .2rem;
						color: #999;
						margin-top: 0.05rem;
					}
				}
			}

			.manually-box {
				background: #fff;
				text-align: center;
				height: 1rem;
				font-size: .24rem;
				line-height: 1rem;

				.act {
					color: #f60;
				}
			}
		}

		.border-bottom {
			height: 10px;
			background-color: #f5f5f5;
		}
	}

	.pop-box {
		.ui-pop-title {
			font-size: .3rem;
			text-align: center;
			line-height: 1rem;
		}

		.ui-pop-conten {
			.region-tab {
				line-height: 1.15;
				border-bottom: 1px solid #f6f6f6;
				padding: 0 0.2rem;

				.active {
					border-bottom: 2px solid #f60;
					color: #f60;
				}

				text {
					padding: 0.15rem;
					font-size: .24rem;
					display: inline-block;
				}
			}

			.region-list {
				height: 4rem;
				overflow: auto;

				.list {
					padding: 0.1rem 0.2rem;

					.item {
						line-height: 1.15;
						display: block;
						padding: 0.1rem 0.15rem;
						font-size: .24rem;
					}
				}
			}
		}
	}
</style>